<template>
    <tpl src="res/tpl/components/dialog.tpl" width="400" height="300" :x="dialogX" :y="dialogY" title="地图" :visible="visible">
        <img src="res/ui/miniMap.jpg" x="15" y="48" width="370" height="235" @over="tipOn" @out="tipOut" @move="tipMove" @click="autoRun"></img>
        <txt :text="mapName" x="170" y="50" size="16" color="#ffffff"></txt>
        <img :x="roleX" :y="roleY" src="res/ui/colorLight.png" color="#00FF00" width="5" height="5"></img>
        <txt :text="tipText" :x="tipX" :y="tipY" :visible="tipVisible" size="14" color="#ffffff"></txt>
    </tpl>
</template>

<script>
    init(){
        this.mapName = "盟重省";
        this.tipText = "0,0";
        this.tipX = 0;
        this.tipY = 0;
        this.tipVisible = false;
        this.mapScale = {x: 0,y: 0};
        this.roleX = 15;
        this.roleY = 48;
        this.dialogX = 0;
        this.dialogY = 0;
    }

    create() {
        this.tipText = PLAYER.info.x + "," + PLAYER.info.y;
        this.mapScale = {x: 370/(MAP.info.numW * MAP.info.picW / MAP.cellX), y: 235/(MAP.info.numH * MAP.info.picH / MAP.cellY)};
        this.roleX = PLAYER.info.x * this.mapScale.x + 15;
        this.roleY = PLAYER.info.y * this.mapScale.y + 48;
        console.log("mnimap create");
    }

    update(delta) {

    }

    destroyed() {

    }

    tipOn(event){
        this.tipVisible = true;
    }

    tipOut(event){
        this.tipVisible = false;
    }

    tipMove(event){
        let x = Math.ceil((event.x - this.x - this.dialogX - 25) / this.mapScale.x);
        let y = Math.ceil((event.y - this.y - this.dialogY - 55) / this.mapScale.y);
        this.tipText = x + "," + y;
        this.tipX = event.x - this.x - this.dialogX - this.tipText.length * 5;
        this.tipY = event.y - this.y - this.dialogY - 28;
    }

    autoRun(event){
        this.roleX = event.x - this.x - this.dialogX - 10;
        this.roleY = event.y - this.y - this.dialogY - 10;
        let x = (this.roleX - 15)/ this.mapScale.x;
        let y = (this.roleY - 45) / this.mapScale.y;
        PLAYER.move(x, y);
    }

</script>